<template>
  <div class="inquiry-from">
    <h1 class="h1">{{ msg }}</h1>
    <div slot="list" class="nut-vert-list-panel">
      <nut-cell class="text-hidden" desc="view" :showIcon="true" @click.native="show= true">
        <div slot="avatar">
          <nut-avatar v-if="agent==='pc'"
                      bg-icon="">D
          </nut-avatar>
          <nut-avatar v-else
                      bg-icon="">M
          </nut-avatar>
        </div>
        <div slot="title">来自
          <b>{{ siteid }}</b> {{ realname }}的询盘
          <p style="font-size: 8px;">
            {{ addtime }} 国家：{{ country }}
          </p>
        </div>
        <span slot="sub-title">{{ info }}</span>
      </nut-cell>
    </div>
    <nut-popup :style="{ height: '60%' }" position="bottom" closeable close-icon="cross" v-model="show">
      <div class="info">
        <nut-row class="flex-content flex-content-light">
          <nut-col :span="12">
            <div>国家</div>
          </nut-col>
          <nut-col :span="12">
            <div>{{ country }}</div>
          </nut-col>
        </nut-row>
        <nut-row class="flex-content flex-content-light">
          <nut-col :span="12">
            <div>询盘时间</div>
          </nut-col>
          <nut-col :span="12">
            <div>{{ addtime }}</div>
          </nut-col>
        </nut-row>
        <nut-row class="flex-content flex-content-light">
          <nut-col :span="12">
            <div>ip地址</div>
          </nut-col>
          <nut-col :span="12" style="font-size: 12px;">
            <div>{{ ipaddr }}</div>
          </nut-col>
        </nut-row>
        <nut-row class="flex-content flex-content-light">
          <nut-col :span="12">
            <div>邮箱</div>
          </nut-col>
          <nut-col :span="12">
            <div style="font-size: 12px;">{{ email }}</div>
          </nut-col>
        </nut-row>
        <nut-row class="flex-content flex-content-light">
          <nut-col :span="12">
            <div>电话</div>
          </nut-col>
          <nut-col :span="12">
            <div style="font-size: 12px;">{{ phone }}</div>
          </nut-col>
        </nut-row>
        <span style="margin-top: 10px;">{{ info }}</span>
      </div>
    </nut-popup>
  </div>
</template>

<script>
import Vue from 'vue';
import NutUI from '@nutui/nutui';
import '@nutui/nutui/dist/nutui.css';

NutUI.install(Vue);

export default {
  name: 'nutcol',
  props: {
    siteid: String,
    msg: String,
    info: String,
    realname: String,
    addtime: String,
    country: String,
    email: String,
    phone: String,
    ipaddr: String,
    agent: String,
  },
  data() {
    return {
      show: false,
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    }
  }
}
</script>

<style lang='scss'>
.nut-vert-list-panel {

  .text-hidden {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    .nut-cell-box {
      margin-bottom: 5px;

      .nut-cell-left {
        width: 80%;
      }

      .nut-cell-right {
        position: absolute;
        right: 20px;
      }
    }
  }
}

.info {
  width: 90%;
  text-align: left;
  font-size: 22px;
  margin-top: 30px;
  margin-left: 10px;
  padding-left: 20px;

  .flex-content {
    font-size: 15px;
    padding: 5px;
    margin-top: 8px;
  }

  .flex-content-light {
    font-size: 15px;
    border-bottom: solid rgba(128, 128, 128, 0.3) 1px;
    background-clip: padding-box;
  }
}
</style>
